import kuangImg from "@/assets/kuang.png"; // 相对路径，根据组件位置调整

import { Avatar } from "antd";

const MyAvatar1 = () => {
  return (
    <div>
      <img
        src={kuangImg}
        alt="avatar frame"
        style={{
          position: "relative",
          width: "56px", // 和容器同宽高
          height: "56px",
          top: 0,
          left: 0,
          pointerEvents: "none",
          zIndex: 1,
          overflow: "hidden",
        }}
      />
      <Avatar
        size={36}
        src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=111"
        shape="square"
        style={{
          borderRadius: 6,
          display: "block",
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)", // 绝对居中
          zIndex: -1, // 头像在上层
        }}
      />
    </div>
  );
};

const MyAvatar2 = () => {
  return (
    <Avatar
      size={36}
      src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=111"
      shape="square"
      style={{
        borderRadius: 6,
        display: "block",
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)", // 绝对居中
        zIndex: -1, // 头像在上层
      }}
    />
  );
};
export { MyAvatar1, MyAvatar2 };
